/*
 * @Descripttion:
 * @version:
 * @Author: cain
 * @Date: 2023-01-12 14:56:02
 * @LastEditors: Andy
 * @LastEditTime: 2023-01-13 08:55:42
 * @FilePath: \cain-ui\package\button\button.tsx
 */
import { defineComponent, ref, toRefs } from "vue";

type buttonType = "primary" | "success" | "warning" | "cain";

export default defineComponent({
  name: "CButton",
  props: {
    type: {
      type: String,
      default: "default",
    },
    ripple: {
      type: String,
      default: "227,242,253,.3",
    },
    rounded: {
      type: Boolean,
      default: false,
    },
    startIcon: {
      type: String,
      default: "",
    },
    endIcon: {
      type: String,
      default: "",
    },
    text: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { slots }) {
    const { type, ripple, rounded, startIcon, endIcon, text } = toRefs(props);
    const c_ripple = ref<string>(ripple.value);
    const isWidth = ref<string>("none");
    c_ripple.value = type.value == "default" ? "0,0,0,.3" : c_ripple.value;

    isWidth.value = typeof slots.default == "function" ? isWidth.value : "64px";
    return () => (
      <div
        accesskey={c_ripple.value}
        style={{ minWidth: isWidth.value }}
        class={[
          "c-button",
          "c-button-" + type.value,
          { "c-button-circle": rounded.value, "c-button-text": text.value },
        ]}
        v-ripple={c_ripple.value}
      >
        {startIcon.value ? (
          <c-icon size="18" icon={startIcon.value} />
        ) : (
          <span style="display:none"></span>
        )}
        <span>{slots.default && slots.default()}</span>
        {endIcon.value ? (
          <c-icon size="18" icon={endIcon.value} />
        ) : (
          <span style="display:none"></span>
        )}
      </div>
    );
  },
});
